<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>BPMN Modeler</title>
    <link rel="icon" th:href="@{/pear/component/bpmnModeler/favicon.ico}">
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>

</head>

<body>
<noscript>
    <strong>We're sorry but the BPMN modeler doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
</noscript>

<!-- 使用iframe加载本地BPMN模型编辑器 -->
<iframe
        th:src="@{/pear/component/bpmnModeler/index.html}"
        id="bpmnFrame"
        frameborder="0"
        width="100%"
        height="800px">
</iframe>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    layui.use(['table', 'layer', 'jquery', 'form'], function () {
        let $ = layui.jquery;
        let layer = layui.layer;
        let userList = [];
        $.ajax({
            url: baseURL + 'user/getUserList',
            data: {
                roleId: 1
            },
            type: 'get',
            success: function (result) {
                userList = result.data.map(r => ({
                    id: r.userId,
                    name: r.name
                }))
            },
            error: function () {
                layer.msg('服务器错误，请稍后再试！', {
                    icon: 2,
                    time: 2000
                });
            }
        });
        // 等待iframe加载完成
        document.getElementById('bpmnFrame').onload = function () {
            // 初始化数据
            const initData = {
                xml: "", // 初始XML内容
                users: userList,
                groups: [],
                categorys: [
                    {name: "Music", id: "7"},
                    {name: "Articles", id: "8"},
                ],
                isView: false
            };

            // 向iframe发送初始化数据
            this.contentWindow.postMessage(initData, '*');
        };

        // 监听来自iframe的消息
        window.addEventListener('message', function (event) {
            console.log(event.data);
            if (event.data.process.id.trim() === "") {
                layer.msg("请填写流程标识Key", {
                    icon: 3,
                    time: 2000
                })
                return
            }
            if (event.data.process.name.trim() === "") {
                layer.msg("请填写流程名称", {
                    icon: 3,
                    time: 2000
                })
                return
            }
            save(event.data)
        });


        let save = function (e) {
            let data = {
                id: e.process.id,
                name: e.process.name,
                xml: e.xml
            }
            let loading = layer.msg('数据保存中', {icon: 16, shade: 0.3, time: 0});
            $.ajax({
                url: baseURL + 'workflow/flowDefinition/add',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 1000) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 2000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("processDefinitionTable");
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 2000
                        });
                    }
                },
                error: function () {
                    layer.close(loading);
                    layer.msg('服务器错误，请稍后再试！', {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        }
    });
</script>
</body>
</html>